<html>
  <head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
    <title>FreeCell</title>
    <link rel="icon" href="dragon.png">
    <link rel='stylesheet' href='freecell.css'></link>
    <script src='freecell.js'/></script>
    <script src='deck.js'/></script>
    <script src='solver.js'/></script>
    <script src="https://mohayonao.github.io/timbre.js/timbre.js"></script>
  </head>
  <body onload='initialize()' onresize='redraw()'>
    <audio id='shuffle'<source src='shuffle.mp3'/></audio>
    <audio id='move'<source src='move.mp3'/></audio>
    <audio id='home'<source src='home.mp3'/></audio>
    <audio id='success'<source src='success.mp3'/></audio>

    <div class='options' id='options'>
      <label id='solve' onclick='get_solution()'>❕</label>
      <label class='separator'>|</label>
      <label id='difficulty'>&nbsp;</label>
      <label class='separator'>|</label>
      <label class='control' id='prev_deal' onclick='previous_deal()'>◀️</label>
      <label class='control' id='next_deal' onclick='next_deal()'>▶️</label>
      <input type='number' min=1 max=1000000000 size=9 id='deal_num' onchange='set_deal()'></input>

      <label class='separator'>|</label>
      <select id='select_deck' onchange='select_deck()'>
        <option value=0>clean</option>
      </select>

      <label class='separator'>|</label>
      <select id='select_auto_play' onchange='select_auto_play()'>
        <option value='max' selected>max</option>
        <option value='safe'>safe</option>
        <option value='none'>none</option>
      </select>

      <label class='separator'>|</label>
      <label class='control' id='undo_all' onclick='undo_all()'>⏮️</label>
      <label class='control' id='redo_all' onclick='redo_all()'>⏭️</label>
      <label id='moves'></label>
      <label class='control' id='undo' onclick='undo()'>◀️</label>
      <label class='control' id='redo' onclick='redo()'>▶️</label>
      <label class='control' id='replay' onclick='toggle_replay()'>⏯️</label>

      <label class='separator'>|</label>
      <label class='control' id='elapse' onclick='toggle_elapse()'>⏱</label>
      <label class='separator'>|</label>
      <label id='sound' onclick='toggle_sound()'>🔊</label>
      <label class='separator'>|</label>
      <label id='help_sign' onclick='toggle_help()'>❔</div>
    </div>

    <table class='reserve'>
      <tr>
        <td class='nocard' id='r0' ondragover='accept_drop(event)'>&nbsp;</td>
        <td class='nocard' id='r1' ondragover='accept_drop(event)'>&nbsp;</td>
        <td class='nocard' id='r2' ondragover='accept_drop(event)'>&nbsp;</td>
        <td class='nocard' id='r3' ondragover='accept_drop(event)'>&nbsp;</td>
        <td>
          <div class='logo' id='logo' onclick='toggle_options()'>Free<br>Cell</div>
          <div class='wins'><b id='wins'></b></div>
        </td>
        <td class='nocard' id='f0' ondragover='accept_drop(event)'><font color='black'>&spades;</font></td>
        <td class='nocard' id='f1' ondragover='accept_drop(event)'><font color='darkred'>&hearts;</font></td>
        <td class='nocard' id='f2' ondragover='accept_drop(event)'><font color='darkred'>&diams;</font></td>
        <td class='nocard' id='f3' ondragover='accept_drop(event)'><font color='black'>&clubs;</font></td>
      </tr>
    </table>

    <table class='tableau'>
      <tr>
        <td class='nocard' id='t0' ondragover='accept_drop(event)'></td>
        <td class='nocard' id='t1' ondragover='accept_drop(event)'></td>
        <td class='nocard' id='t2' ondragover='accept_drop(event)'></td>
        <td class='nocard' id='t3' ondragover='accept_drop(event)'></td>
        <td class='nocard' id='t4' ondragover='accept_drop(event)'></td>
        <td class='nocard' id='t5' ondragover='accept_drop(event)'></td>
        <td class='nocard' id='t6' ondragover='accept_drop(event)'></td>
        <td class='nocard' id='t7' ondragover='accept_drop(event)'></td>
      </tr>
    </table>

    <div class='message' id='done' onclick='hide_element("done")'>Well done!</div>
    <div class='message' id='alert' onclick='hide_element("alert")'></div>

    <div class='tip' id='help_solve'>
      Download solution for game #1~1000000 or solve in browser for game #>1000000
    </div>
    <div class='tip' id='help_deal_num'>Game number</div>
    <div class='tip' id='help_difficulty'>Difficulty level</div>
    <div class='tip' id='help_prev_deal'>Previous game</div>
    <div class='tip' id='help_next_deal'>Next game</div>
    <div class='tip' id='help_select_deck'>Card style</div>
    <div class='tip' id='help_select_auto_play'>Auto play mode</div>
    <div class='tip' id='help_undo_all'>Undo all</div>
    <div class='tip' id='help_redo_all'>Redo all</div>
    <div class='tip' id='help_moves'>Move count</div>
    <div class='tip' id='help_undo'>Undo</div>
    <div class='tip' id='help_redo'>Redo</div>
    <div class='tip' id='help_elapse'>Time on/off</div>
    <div class='tip' id='help_sound'>Sound on/off</div>
    <div class='tip' id='help_help_sign'>Help</div>
    <div class='line' id='line_solve'></div>
    <div class='line' id='line_deal_num'></div>
    <div class='line' id='line_difficulty'></div>
    <div class='line' id='line_prev_deal'></div>
    <div class='line' id='line_next_deal'></div>
    <div class='line' id='line_select_deck'></div>
    <div class='line' id='line_select_auto_play'></div>
    <div class='line' id='line_undo_all'></div>
    <div class='line' id='line_redo_all'></div>
    <div class='line' id='line_moves'></div>
    <div class='line' id='line_undo'></div>
    <div class='line' id='line_redo'></div>
    <div class='line' id='line_elapse'></div>
    <div class='line' id='line_sound'></div>
    <div class='line' id='line_help_sign'></div>
    <div class='tip' id='instructions'>
      <ul>
        <li>Click on a card or a column to let the game figure out the move.&nbsp;&nbsp;&nbsp;&nbsp;</li>
        <li>Drag & drop to specify the exact move.</li>
        <li>Click on the "Free Cell" logo to show/hide the menu bar.</li>
        <li> Read more at
          <a href='https://github.com/macroxue/freecell' target='_blank'>
            https://github.com/macroxue/freecell</a>.
        </li>
      </ul>
    </div>
  </body>
</html>
